<template>
  <a-form ref="formRef" :model="formState" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">



    <a-row>
      <a-col :span="14">
        <a-form-item ref="userName" label="字段名称" name="userName"
          :rules="[{required: formState.isRequired,message: '请填写字段名称', trigger: ['change','blur']}]">
          <a-input v-model:value="formState.userName" placeholder="请填写字段名称" />
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="是否必填" name="isRequired">
          <a-radio-group v-model:value="formState.isRequired">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
    </a-row>

    <a-row>
      <a-col :span="14">
        <a-form-item label="字段类型" name="userType"
          :rules="[{required: formState.isRequired2,message: '请填写字段类型', trigger: ['change','blur']}]">
          <a-select v-model:value="formState.userType" placeholder="请选择">
            <a-select-option value="单行文本">单行文本</a-select-option>
            <a-select-option value="日期">日期</a-select-option>
            <a-select-option value="单选下拉">单选下拉</a-select-option>
          </a-select>
        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="是否必填" name="isRequired2">
          <a-radio-group v-model:value="formState.isRequired2">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
    </a-row>

    <a-row v-show="formState.userType">
      <a-col :span="14">
        <a-form-item label="单行文本" name="date1"
          :rules="[{required: formState.isRequired3,message: '请填写单行文本', trigger: ['change','blur']}]"
          v-if="formState.userType == '单行文本'">
          <a-input v-model:value="formState.date1" placeholder="请填写字段名称" />
        </a-form-item>

        <a-form-item label="日期类型" name="date2"
          :rules="[{required: formState.isRequired3,message: '请选择日期类型', trigger: ['change','blur']}]"
          v-if="formState.userType == '日期'">
          <a-radio-group v-model:value="formState.date2">
            <a-radio :style="radioStyle" value="年">年</a-radio>
            <a-radio :style="radioStyle" value="年-月">年-月</a-radio>
            <a-radio :style="radioStyle" value="年-月-日">年-月-日</a-radio>
            <a-radio :style="radioStyle" value="年-月-日 时：分">年-月-日 时：分</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="单选下拉" name="date3"
          :rules="[{required: formState.isRequired3,message: '请选择单选下拉', trigger: ['change','blur']}]"
          v-if="formState.userType == '单选下拉'">

          <a-select v-model:value="formState.date3">

            <template #dropdownRender="{ menuNode: menu }">
              <v-nodes :vnodes="menu" />
              <a-divider style="margin: 4px 0" />
              <div style="padding: 4px 8px; cursor: pointer" @mousedown="e => e.preventDefault()" @click="addItem">
                <plus-outlined />
                Add item
              </div>
            </template>

            <a-select-option :value="item" v-for="(item,i) in selectList" :key="i">
              {{item}}

              <div class="delete-icon" @click.stop="delItem(i)">
                <DeleteOutlined />
              </div>
            </a-select-option>
          </a-select>



          <a-modal v-model:visible="visible" v-if="visible" title="添加单选下拉" width="30vw" @ok="handleOk">
            <a-input v-model:value="date3ListValue" placeholder="请填写需要添加的单选下拉内容" />
          </a-modal>

        </a-form-item>
      </a-col>
      <a-col :span="10">
        <a-form-item label="是否必填" name="isRequired3">
          <a-radio-group v-model:value="formState.isRequired3">
            <a-radio :value="true">是</a-radio>
            <a-radio :value="false">否</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-col>
    </a-row>

  </a-form>
</template>
<script lang="ts">
import {
  DeleteOutlined
} from '@ant-design/icons-vue';
import { PlusOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import { defineComponent, reactive, ref, toRaw, UnwrapRef, inject } from 'vue';
interface FormState {
  userName: string | undefined;
  userType: string | undefined;
  date1: string | undefined;
  date2: string | undefined;
  date3: string | undefined;
  isRequired: boolean | undefined;
  isRequired2: boolean | undefined;
  isRequired3: boolean | undefined;
  resource: string;
  desc: string;
}

export default defineComponent({
  props: {
    currentData: {
      required: true,
      type: Object
    }
  },
  components: {
    PlusOutlined,
    VNodes: (_, { attrs }) => {
      return attrs.vnodes;
    },
    DeleteOutlined,
  },
  setup(props, { emit }) {
    // console.log(props.currentData, 'currentData');

    const selectList: any = inject('selectList'); //单选下拉 列表，从父级拿到



    // 单选 单独一行 样式
    const radioStyle = reactive({
      display: 'block',
      height: '30px',
      lineHeight: '30px',
    });

    const formRef = ref();
    const formState: UnwrapRef<FormState> = reactive({
      userName: undefined,
      userType: undefined,
      date1: undefined,
      date2: undefined,
      date3: undefined,
      isRequired: undefined,
      isRequired2: undefined,
      isRequired3: undefined,
      resource: '',
      desc: '',
    });

    // 编辑回显
    formState.userName = props.currentData.userName;
    formState.isRequired = props.currentData.isRequired;
    formState.userType = props.currentData.userType;
    formState.isRequired2 = props.currentData.isRequired2;

    switch (formState.userType) {
      case '单行文本':
        formState.date1 = props.currentData.fieldOption;
        break;
      case '日期':
        formState.date2 = props.currentData.fieldOption;
        break;
      case '单选下拉':
        formState.date3 = props.currentData.fieldOption;
        break;

      default:
        break;
    }
    formState.isRequired3 = props.currentData.isRequired3;



    const rules = {
      // userName: [{ required: true, message: '请填写字段名称', trigger: 'blur' }],
    };

    // 单选下拉 添加 / 删除
    let index = 0;

    const addItem = () => {
      visible.value = true;
    };

    const delItem = (i:number)=>{
      selectList.value.splice(i,1)
    }

    // 添加选项相关弹框
    const visible = ref(false)
    const date3ListValue = ref('')

    const handleOk = () => {
      selectList.value.push(date3ListValue.value);
      visible.value = false;
      date3ListValue.value = '';
    };


    // 编辑确认
    const onSubmit = () => {
      formRef.value
        .validate()
        .then(() => {
          // console.log('values', formState, toRaw(formState));

          props.currentData.userName = formState.userName;
          props.currentData.isRequired = formState.isRequired;
          props.currentData.userType = formState.userType;
          props.currentData.isRequired2 = formState.isRequired2;
          switch (formState.userType) {
            case '单行文本':
              props.currentData.fieldOption = formState.date1;
              break;
            case '日期':
              props.currentData.fieldOption = formState.date2;
              break;
            case '单选下拉':
              props.currentData.fieldOption = formState.date3;
              break;
            default:
              break;
          }
          props.currentData.isRequired3 = formState.isRequired3;


          message.success('编辑成功!');
          emit('closeAddModal');
        })
        .catch((error: ValidateErrorEntity<FormState>) => {
          // console.log('error', error);
        });
    };
    const resetForm = () => {
      formRef.value.resetFields();
    };


    return {
      radioStyle,
      formRef,
      labelCol: { span: 5 },
      wrapperCol: { span: 17 },
      other: '',
      formState,
      rules,
      onSubmit,
      resetForm,
      addItem,
      visible,
      handleOk,
      date3ListValue,
      selectList,
      delItem
    };
  },
});
</script>


<style lang="scss" scoped>
.delete-icon {
  float: right;
}
</style>
